<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    ** 创建React 对象的时候名字一定要大写**

    虚拟DMO树
        1.用javascript对象构建
        2.

    创建DOM:
        基础写法:
            创建一个React对象:
            let H = React.creatElement('h1',{className:'active'},'你好！世界！');
            把React创建的虚拟DOM渲染到DOM:
            React.render(H,document.getElementById('app'));

        jsx语法:
            注意:
            1.在jsx语法中,class要写成className
            2.顶层只能有一个标签
            3.表单元素要写结束标签
            课件目录:E:\（5）miaov\js高级\8.9 React\基础语法.html


    语法：
        初始化数据：
            getInitialState:function(){return{}};
            当这个状态中的值发生改变的时候就会更新DOM
        更改状态：
            this.setState({})
        给元素身上绑定事件:
            onClick = {this.click}
        定义事件:
            跟render函数时平级关系，创建一个事件函数
        输出:
            {this.state.num}
            输出初始化中的num数据


    组件化开发:
        实现低耦合，高内聚，玩的是团队协作


    从赋组件传递给子组件的方式是通过
        this.props 来进行传递的


    单项数据流:
        父组件的数据流向子组件是单向的,父级的数据只能父级修改，子级不允许修改
        参考课件:8.9React/my-app


    react中的表单分为受限为和非受限
        受限:
            表单元素中加了默认的value值,都为受限组件
            默认值应该是根据状态来修改的,只要状态不改,里面的值就不会改变
            只要是更改表单元素可以通用 onChange
        受限组件变为非受限组件:
            1.绑定onchange事件,拿到ev.target.value赋值给数据
            2.把value替换成defaultValue


    参数类型限制:
        限制父组件传入的参数必须为number类型
        组件.propTypes = {
            参数 : React.propTypes.number,
        }
        限制父组件必须传name参数
        组件.propTypes = {
            name:React.propTypes.string.isRequired,
        }


    配置默认参数(有参数走参数，没参数走默认):
        const defaultProps = {
            name:'默认名字',
        }
        调用:
            组件.defaultProps = defaultProps;

    ref
        可以快速定位元素
        读:console.log(this.head)
        写:ref={(ele)=>{this.head = ele}};
        ref不能跨组件使用,不然会报undefined


    生命周期:
        钩子函数:在组件的各个阶段的回调函数
        挂载前:componentWillMount
        挂载后:componentDidMount  //ajax请求的数据放在这个里面
        卸载后:componentWillUnmount
        可以在react各个阶段干想干的事


    children:
        React中的组件可以是单标签也可以是双标签，比如: <HeadModel/> 或 <HeadModel></HeadModel>
        如果是双标签，里面可以插入Dom结构，子组件尅通过 this.props.children获取,
        又通过React.children.map 方法去循环生成出结构中的内容
        例子:
            <HeadModel>
                <span>hello!</span>
                <span>word!</span>
            </HeadModel>
            let defaultChild = [
                <span>你好!</span>,
                <span>世界!</span>
            ]
            if(this.props.children){
                //如果HeadModel中有DOM结构，那么走这条  输出：hello!word!
                child = React.children.may(this.props.children,(child) => {
                    return child
                })
            }else{
                //如果HeadModel中没有DOM结构，那么走这条  输出：你好！世界！
                child = React.children.may(defaultChild,(child) => {
                    return child
                })
            }


    路由:
        安装 npm i react-router-dom
        improt {BrowserRouter as Router,Route,Link} from 'react-router-dom';
        写法:
            <Router>
                <Route path='/ppa' component={ <PPA />}/>
            </Router>
        component里面既可以写组件,也可以接受一个函数
        这个函数的参数中，有个math，他可以显示当前的路由是什么?
        math = {
            path:'/:id',
            url:'/ppa',
            isExact:true,
            params:{id:arr},
        }
        match.params.id 就是路由的地址 /后面的地址
        /:id 就是/ + .params.id，就能路由的地址,通过matc找到当前路由是谁


        exact:
            加在Route中
            如果加了:
                /ppa/xxx  拿不到ppa的组件,加了后会看全部
            如果没加:
                /ppa/xxx 可以拿到ppa的组件,不加的话只看第一个/后面的东西


    插件:
        不同组件公用功能:Mixins
            安装:
                npm i react-mixin@2
                导入 import ReactMixin from 'react-mixin'
            用法:
                全局引用,在最后,
                ReactMixin(组件.propTypes,Mixin函数名)
                组件使用:
                    Mixin函数名.方法名();
                    Minxin中也有生命周期，可以用他的钩子函数


        可以在jsx中写class:
            安装:
                bable-plugin-react-html-attrs
            用法:
                可以再接再jsx中使用class


        jsx与css在线转换工具:
            网址:
                http://staxmanade.com/CssToReact/


        接口调试软件:
            POSMan


        图标网址:
            http://www.iconfinder.com/


        移动端适配组件(媒体查询):
            安装:
                react-responsive
            用法:
                导入 import MediaQuery from 'react-responsive'
                <MediaQuery query="( min-device-width : 1224px )">
                    <PC端组件 /> //宽度大于1224px显示pc端的
                </MediaQuery>
                <MediaQuery query="( max-device-width : 1224px )">
                    <移动端组件 />  //宽度小于1224px显示移动端的
                </MediaQuery>


        ajax请求框架fetch:
            安装:
                npm install fetch
            用法:
                let Fetch = {
                    method:'GET',  //请求方式
                }

                fetch('url','Fetch').
                then(respones=>respones.json()). //请求成功返回数据，json格式化
                then(json=>{
                    // 返回成功的数据，直接调用里面的k值
                })
                message.success("请求成功");


        react性能优化:
            安装:
                react-addons-pure-render-mixin
            引入:
                import PureRenderMixin from 'react-addons-pure-render-mixin'
            用法:
                constructor(){
                    super()
                    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
                }

        


</script>
</html>
